<template>
  <div>
    <Button type="primary" @click="isShowModal=true">显示富文本</Button>
    <div class="auto pt100">
      <div :class="['fixed trbl0 trans3', isShowModal ? 'op10 zx10' : 'op0 zx-1']" style="background:rgba(55,55,55,.6)">
        <div :class="['fixed bgf tx-50 l50 t15 rds5 trans5', isShowModal ? 'op10 zx20 ani-large' : 'op0 zx-1 ani-small']" style="width:800px;position:fixed !important;">
          <div class="f ac pl10" style="border-bottom:1px solid #eee;">
            <div class="fs14 b f1">标题</div>
            <div @click.stop="isShowModal=false" class="f ac xc poi" style="height:50px;width:50px;">
              <svg t="1671764723022" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2737" width="12" height="12"><path d="M1007.603202 929.818395L592.684241 514.699473 1007.603202 99.780512c10.797891-10.797891 16.196837-24.795157 16.196837-38.992385 0-13.997266-5.398946-28.194493-16.196837-38.992384-21.595782-21.595782-56.388987-21.595782-77.984768 0L514.699473 436.914665 99.780512 21.795743C78.18473 0.199961 43.391525 0.199961 21.795743 21.795743s-21.595782 56.388987 0 77.984769l415.118922 414.918961L21.795743 929.818395c-21.595782 21.595782-21.595782 56.388987 0 77.984768s56.388987 21.595782 77.984769 0l414.918961-415.118922L929.818395 1007.603202c10.797891 10.797891 24.795157 16.196837 38.992384 16.196837 13.997266 0 28.194493-5.398946 38.992384-16.196837 21.395821-21.395821 21.395821-56.388987-0.199961-77.784807z" fill="#999999" p-id="2738"></path></svg>
            </div>
          </div>
          <div class="pt30 pl30 pr30 pb30">
            <Ueditor :msg="msg" @change="e => msg = e" class='w100'></Ueditor>
          </div>
          <div class="f ac xe pt10 pl10 pr15 pb10" style="border-top:1px solid #eee;">
            <Button @click.stop="isShowModal=false" class="mr15">取消</Button>
            <Button type="primary">确定</Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src='./index.js'></script>
<style scoped>
.ani-large{
  animation: large .5s ease -.1s 1 both;
}
@keyframes large {
  0%{transform: translateX(-50%) scale(.8);}
  100%{transform: translateX(-50%) scale(1);}
}
.ani-small{
  animation: small .5s ease -.1s 1 both;
}
@keyframes small {
  0%{transform: translateX(-50%) scale(1);}
  100%{transform: translateX(-50%) scale(.8);}
}
</style>